import React, { useState } from 'react';
import { Card, Space, Typography, Modal, Input, message } from 'antd';
import { SettingOutlined, DeleteOutlined } from '@ant-design/icons';
import { SvgIcon } from '@/components/icon';
import Modals from '@/components/modals/Modals';
import './application-card.css';
import AvatarDisplay from '../work-modal/components/AvatarDisplay';

const { Text } = Typography;

interface ApplicationCardProps {
  id: string;
  name: string;
  description: string;
  connectionLimit?: number;
  connectionStatus?: string;
  icon?: string;
  appAvatar?: string;
  isPreview?: boolean;
  onDelete?: (id: string) => void;
  onConfig?: (id: string, connectionLimit: number) => void;
}

const ApplicationCard: React.FC<ApplicationCardProps> = ({
  id,
  name,
  description,
  connectionLimit = 5,
  connectionStatus,
  icon = 'ai-fusion1',
  appAvatar,
  isPreview = true,
  onDelete,
  onConfig
}) => {
  const [isConfigModalVisible, setIsConfigModalVisible] = useState(false);
  const [configConnectionLimit, setConfigConnectionLimit] = useState(connectionLimit);

  const handleConfig = () => {
    setIsConfigModalVisible(true);
  };

  const handleDelete = () => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个应用吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        onDelete?.(id);
      },
    });
  };

  const handleConfigOk = () => {
    onConfig?.(id, configConnectionLimit);
    setIsConfigModalVisible(false);
    message.success('连接数量设置成功');
  };

  const handleConfigCancel = () => {
    setConfigConnectionLimit(connectionLimit);
    setIsConfigModalVisible(false);
  };

  return (
    <>
      <Card
        className={`application-card rounded-default border border-line-2 shadow-inc-shadow-b-1 h-full transition-all duration-300 ease-in-out hover:shadow-inc-shadow-b-2 hover:border-primary ${isPreview ? 'preview-mode' : ''}`}
        bodyStyle={{ padding: '16px' }}
      >
        <div className="flex items-center gap-3">
          <div className="flex items-center">
            <AvatarDisplay
              src={icon}
              className="h-[32px] max-h-[32px] w-[32px] max-w-[32px]"
              size={32}
            />
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-cn-16-blod mb-2">
              {name}
            </div>
            <div className="text-cn-14 leading-6 mb-3 line-clamp-1">
              {description}
            </div>
          </div>
          <div className="flex flex-col items-end justify-center gap-1 h-full">
            {/* 连接信息 - hover时隐藏 */}
            <div 
              className={`connection-info flex flex-col items-end justify-center transition-opacity duration-200 ease-in-out ${!connectionStatus?.length ? '' : ''}`}
            >
              <Text className="text-cn-14 text-text-3 leading-tight">
                {connectionStatus ? '连接情况' : '连接上限'}
              </Text>
              <Text className="text-cn-14 text-text-1 font-medium leading-tight">
                {connectionStatus || connectionLimit}
              </Text>
            </div>
            {/* 
              通过 CSS 控制 hover 时 display: none
              .application-card:hover .connection-info { display: none !important; }
              相关样式已在 application-card.css 中定义
            */}
            {/* 操作按钮 - hover时显示 */}
            {!isPreview && (
              <Space className="action-buttons opacity-0 transition-opacity duration-200 ease-in-out mt-1 flex">
                <SettingOutlined 
                  className="action-icon text-cn-16 text-text-3 cursor-pointer transition-all duration-300 ease-in-out hover:text-primary hover:scale-110" 
                  onClick={handleConfig}
                />
                <DeleteOutlined 
                  className="action-icon delete-icon text-cn-16 text-text-3 cursor-pointer transition-all duration-300 ease-in-out hover:text-error hover:scale-110" 
                  onClick={handleDelete}
                />
              </Space>
            )}
          </div>
        </div>
      </Card>

      {/* 配置连接数量模态框 */}
      <Modals
        title="设置数字人连接数量"
        open={isConfigModalVisible}
        onOk={handleConfigOk}
        onCancel={handleConfigCancel}
        okText="确定"
        cancelText="取消"
        width={400}
      >
        <div className="py-0">
          <div className="mb-3">
            <Text className="text-cn-14 text-text-3">
              连接上限(人)
            </Text>
          </div>
          <Input
            type="number"
            value={configConnectionLimit}
            onChange={(e) => setConfigConnectionLimit(Number(e.target.value))}
            min={1}
            max={100}
            className="w-full"
            placeholder="请输入连接上限"
          />
        </div>
      </Modals>
    </>
  );
};

export default ApplicationCard; 